import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    // 商品类别
    categoryList: [
      {
        categoryId: "1",
        categoryName: "商品信息1",
        products: [
          {
            name: "11双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡...",
            price: "10",
            count: 0,
            categoryId: "1",
            id: "1",
          },
          {
            name: "11双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡",
            price: "20",
            count: 0,
            categoryId: "1",
            id: "2",
          },
          {
            name: "11双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡...",
            price: "30",
            count: 0,
            categoryId: "1",
            id: "3",
          },
        ],
      },
      {
        categoryId: "2",
        categoryName: "商品信息2",
        products: [
          {
            name: "22双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡",
            price: "20",
            count: 0,
            categoryId: "2",
            id: "4",
          },
          {
            name: "22双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡",
            price: "30",
            count: 0,
            categoryId: "2",
            id: "5",
          },
          {
            name: "22双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡",
            price: "30",
            count: 0,
            categoryId: "2",
            id: "6",
          },
          {
            name: "22双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡",
            price: "30",
            count: 0,
            categoryId: "2",
            id: "7",
          },
          {
            name: "22双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡",
            price: "30",
            count: 0,
            categoryId: "2",
            id: "8",
          },
          {
            name: "22双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡",
            price: "30",
            count: 0,
            categoryId: "2",
            id: "9",
          },
          {
            name: "22双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡",
            price: "30",
            count: 0,
            categoryId: "2",
            id: "10",
          },
          {
            name: "22双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡",
            price: "30",
            count: 0,
            categoryId: "2",
            id: "11",
          },
        ],
      },
      {
        categoryId: "3",
        categoryName: "商品信息3",
        products: [
          {
            name: "33双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡",
            price: "30",
            count: 0,
            categoryId: "3",
            id: "7",
          },
          {
            name: "33双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡",
            price: "30",
            count: 0,
            categoryId: "3",
            id: "8",
          },
          {
            name: "33双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡",
            price: "30",
            count: 0,
            categoryId: "3",
            id: "9",
          },
          {
            name: "33双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡",
            price: "30",
            count: 0,
            categoryId: "3",
            id: "10",
          },
          {
            name: "33双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡",
            price: "30",
            count: 0,
            categoryId: "3",
            id: "11",
          },
          {
            name: "33双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡",
            price: "30",
            count: 0,
            categoryId: "3",
            id: "12",
          },
          {
            name: "33双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡",
            price: "30",
            count: 0,
            categoryId: "3",
            id: "13",
          },
          {
            name: "33双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡",
            price: "30",
            count: 0,
            categoryId: "3",
            id: "14",
          },
          {
            name: "33双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡",
            price: "30",
            count: 0,
            categoryId: "3",
            id: "15",
          },
          {
            name: "33双层辣麻鸡排堡双层辣麻辣麻鸡排堡双层辣麻辣麻鸡",
            price: "30",
            count: 0,
            categoryId: "3",
            id: "16",
          },
        ],
      },
    ],
    // 已选的商品列表
    selectedProducts: [],
    // total price
    totalPrice: 0,
  },
  mutations: {
    add(state, curProduct) {
      // 如果购物车为空，直接添加
      if (!state.selectedProducts.length) {
        curProduct.count++;
        state.selectedProducts.push(curProduct);
        return;
      }
      const sameProductIndex = getSameProductIndex(
        curProduct.id,
        state.selectedProducts
      );
      // 如果没有添加到购物车,如果有增加商品数量
      if (sameProductIndex === undefined) {
        curProduct.count++;
        state.selectedProducts.push(curProduct);
      } else {
        state.selectedProducts[sameProductIndex].count++;
      }

      // 计算总价
    state.totalPrice = 0;
      state.selectedProducts.forEach((item) => {
        state.totalPrice += parseInt(item.price) * item.count
      })
    },
    sub(state, curProduct) {
      const sameProductIndex = getSameProductIndex(
        curProduct.id,
        state.selectedProducts
      );
      state.selectedProducts[sameProductIndex].count--;
      // 如果当前商品数量减为0，从数组中删除该商品
      if (state.selectedProducts[sameProductIndex].count === 0) {
        state.selectedProducts.splice(sameProductIndex, 1);
      }
      // 计算总价
      state.totalPrice = 0;
      state.selectedProducts.forEach((item) => {
        state.totalPrice += parseInt(item.price) * item.count
      })
    },
  },
});


// 查找相同商品的所在的位置
function getSameProductIndex(id, list) {
  let sameProductIndex;
  for (let i = 0; i < list.length; i++) {
    if (list[i].id === id) {
      sameProductIndex = i;
      break;
    }
  }
  return sameProductIndex;
}

export default store;
